<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">-->
    <meta name="referrer" content="no-referrer">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/mymodal.css">
    <script src="js/server-url.js"></script>
    <link rel="stylesheet" href="css/cropper.min.css">
    <link rel="stylesheet" href="css/ImgCropping.css">
    <link rel="stylesheet" href="css/custom-froala.css">


</head>
<body>
    <audio id="myaudio" src="audiofile/tipsound.wav"></audio>
    <div class="all_container">
        <div class="container">
            <div class="custom-content">
                <!--顶部头像，导航栏 start-->
                <div class="row custom-content-top">
                    <!--顶部导航栏头像与搜索按钮 start-->
                    <div class="col-xs-3 custom-top-left">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="head-portrait">
                                    <div title="个人信息" id="head-nav" class="custom-nav-click"></div>
                                    <img title="个人信息" id="head-img" class="img-responsive img-circle" src="img/headportrait.jpg" alt="">

                                    <ul class="custom-head-meau">
                                        <li id="userinfo_btn">个人信息</li>
                                        <li id="logout_btn">注销登陆</li>
                                    </ul>

                                </div>
                            </div>

                            <div class="col-xs-9">
                                <button type="button" class="custom-search-btn glyphicon glyphicon-search"></button>
                            </div>

                        </div>

                    </div>
                    <!--顶部导航栏头像与搜索按钮 End-->

                    <div class="col-xs-7 col-xs-offset-2 custom-top-right">
                        <div class="btn-group custom-nav-btn-group" role="group" aria-label="...">
                            <button type="button" id="custom-chat-btn" class="custom-chat-btn glyphicon glyphicon-comment"></button>
                            <button type="button" id="custom-linkman-btn" class="custom-linkman-btn glyphicon glyphicon-user"></button>
                            <button type="button" id="custom-papers-btn" class="custom-papers-btn glyphicon glyphicon-duplicate"></button>
                        </div>

                        <!--好友上下线通知-->
                        <span id="friend_online_offline_advice" class="friend_online_offline_advice">

                        </span>
                    </div>



                </div>
                <!--顶部头像，导航栏 end-->

                <!--底部主内容 start-->
                <!--好友列表底部主内容框 start-->
                <div id="custom-linkman-list-id" class="row custom-main-container">

                    <!--左部-->
                    <div class="col-xs-3 custom-main-left-container">

                        <!--添加好友按钮-->
                        <div class="custom-add-item">
                            <!--+-->
                            <!--<div id="custom-add-btn" class="custom-add-click"></div>-->
                            <img src="img/icon_menu.png" id="custom-add-btn" title="打开菜单" class="custom-add-click">
                            <ul class="custom-add-meau">
                                <li id="add-friends-btn">添加好友</li>
                                <li id="group_manage_btn">分组管理</li>
                            </ul>
                        </div>

                        <!--列表-->
                        <div class="row custom-main-left-top">
                            <a class="col-xs-5 col-xs-offset-1 custom-friend-list-btn">好友</a>
                            <a class="col-xs-4 custom-group-chat-list-btn">群聊</a>
                        </div>
                        <!--好友列表分组管理start-->

                        <div class="friends-group-list">
                            <ul class="custom-friends-group-list">
                                <!--分组项-->
                                <li class="custom-group-item">
                                    <h5 class="custom-group">
                                        <span class="glyphicon glyphicon-play"></span>
                                        <span class="group_name">未闻花名</span>&nbsp;0/4
                                    </h5>
                                    <!--该组下的好友列表-->
                                    <ul class="custom-friends-list">
                                        <li socketaddress="123" class="row custom-friend-item">
                                            <img class="col-xs-3 img-responsive img-circle list-headportrait" src="img/headportrait.jpg">

                                            <dl class="col-xs-9 custom-friend-item-info">
                                                <dt class="list-remarks">水银灯</dt>
                                                <dd class="list-motto">没有人会相信未来，谁都无法接受未来..</dd>
                                                <!--<span class="badge custom-num-tip">2</span>-->
                                                <span class="badge custom-online-tip">在线</span>
                                            </dl>
                                        </li>
                                        <li socketaddress="456" class="row custom-friend-item">
                                            <img class="col-xs-3 img-responsive img-circle list-headportrait" src="img/headportrait.jpg">

                                            <dl class="col-xs-9 custom-friend-item-info">
                                                <dt class="list-remarks">汐</dt>
                                                <dd class="list-motto">没有人会相信未来，谁都无法接受未来..</dd>
                                                <!--<span class="badge custom-num-tip">2</span>-->
                                                <span class="badge custom-online-tip">在线</span>
                                            </dl>
                                        </li>
                                    </ul>
                                </li>
                                <!--分组项-->
                                <li class="custom-group-item">
                                    <h5 class="custom-group">
                                        <span class="glyphicon glyphicon-play"></span>
                                        空&nbsp;0/4
                                    </h5>
                                    <!--该组下的好友列表-->
                                    <ul class="custom-friends-list">
                                        <li socketaddress="abc" class="row custom-friend-item">
                                            <img class="col-xs-3 img-responsive img-circle list-headportrait" src="img/default_head.png">

                                            <dl class="col-xs-9 custom-friend-item-info">
                                                <dt class="list-remarks">白</dt>
                                                <dd class="list-motto">这个世界上没有奇迹，有的只是偶然和必然，还有谁做了什么，仅此而已..</dd>
                                                <!--<span class="badge custom-num-tip">5</span>-->
                                                <span class="badge custom-online-tip">离线</span>
                                            </dl>
                                        </li>
                                        <li socketaddress="789" class="row custom-friend-item">
                                            <img class="col-xs-3 img-responsive img-circle list-headportrait" src="img/default_head.png">

                                            <dl class="col-xs-9 custom-friend-item-info">
                                                <dt class="list-remarks">无妄</dt>
                                                <dd class="list-motto">这个世界上没有奇迹，有的只是偶然和必然，还有谁做了什么，仅此而已..</dd>
                                                <!--<span class="badge custom-num-tip">5</span>-->
                                                <span class="badge custom-online-tip">离线</span>
                                            </dl>
                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </div>

                        <!--好友列表分组管理End-->
                    </div>

                    <!--右部-->
                    <div class="col-xs-9 custom-main-right-container">

                        <!--弹出框-->
                        <div class="right-main-container">
                            <div class="row">
                                <div class="col-xs-6 col-xs-offset-3 friend-info-card">
                                    <img class="img-responsive"  id="headportrait" src="img/headportrait.jpg">
                                    <div class="row friend-info-card-div">

                                        <!--<button socketaddress="123" type="button" title="发消息" id="custom-send-message-btn" class="btn btn-default custom-send-message-btn">-->
                                            <!--<span class="glyphicon glyphicon-comment"></span>-->
                                        <!--</button>-->
                                        <img title="发消息" socketaddress="123" id="custom-send-message-btn" class="custom-send-message-btn" src="img/icon_chat.png">
                                        <img title="删除好友" socketaddress="123" id="custom_del_friend_btn" class="custom_del_friend_btn" src="img/icon_del_3.png">

                                        <div class="col-xs-8 col-xs-offset-2">
                                            <dl class="friend-info-card-dl">

                                                <dt class="friend-info-card-remake-top" id="remarks-top">水银灯</dt>
                                                <dd class="friend-info-card-motto" id="motto">没有人会相信未来，谁都无法接受未来...</dd>
                                                <dd class="friend-info-card-item">
                                                    <span class="friend-info-card-item-key">账号&nbsp;&nbsp;&nbsp;</span><span id="username">2194610467</span>
                                                </dd>
                                                <dd class="friend-info-card-item">
                                                    <span class="friend-info-card-item-key">昵称&nbsp;&nbsp;&nbsp;</span><span id="nickname">汐</span>
                                                </dd>
                                                <dd class="friend-info-card-item">
                                                    <span class="friend-info-card-item-key">备注&nbsp;&nbsp;&nbsp;</span>
                                                    <span id="remarks">水银灯</span>
                                                    <input id="remarks_input" class="friend_info_card_input_remarks"  type="text" value="汐" />
                                                    <img id="friend_card_icon_revise" class="friend_card_icon_revise" src="img/icon_revise.png">
                                                </dd>
                                                <dd class="friend-info-card-item">
                                                    <span class="friend-info-card-item-key">分组&nbsp;&nbsp;&nbsp;</span>
                                                    <select id="friend_info_card_group" class="friend_info_card_group">
                                                        <option value="1">未闻花名</option>
                                                        <option value="2">汐</option>
                                                        <option value="3">家人</option>
                                                    </select>
                                                </dd>
                                                <dd class="friend-info-card-item">
                                                    <span class="friend-info-card-item-key">邮箱&nbsp;&nbsp;&nbsp;</span><span id="e-mail">2194610467@qq.com</span>
                                                </dd>

                                            </dl>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--好友列表底部主内容框 end-->

                <!--====================================================================================================================================-->
                <!--====================================================================================================================================-->
                <!--====================================================================================================================================-->

                <!--聊天页面主内容框 start-->
                <div id="custom-chat-list-id" class="row custom-chat-container">

                    <!--左部-->
                    <div class="col-xs-3 custom-chat-left-container">

                        <!--正在聊天列表start-->
                        <div class="system_message_btn">
                            <button class="btn btn-primary" id="btn_system_message" type="button">
                                系统消息 <span class="badge">0</span>
                            </button>
                            <button class="btn btn-primary" id="btn_system_friend_apply" type="button">
                                好友请求 <span id="friend_application_num" class="badge">0</span>
                            </button>
                        </div>
                        <div class="chat-list">

                            <ul id="chatting-list" class="custom-chat-list">

                                <!--<li data-id="123" class="row custom-chat-friend-item">-->
                                    <!--<img class="col-xs-3 img-responsive img-circle list-headportrait" src="img/headportrait.jpg">-->
                                    <!--<dl class="col-xs-9 custom-friend-item-info">-->
                                        <!--<dt class="list-remarks">水银灯</dt>-->
                                        <!--<dd class="list-motto">没有人会相信未来，谁都无法接受未来..</dd>-->
                                        <!--<span class="badge custom-num-tip">3</span>-->
                                        <!--<span class="badge custom-time">3:15</span>-->
                                        <!--<button class="custom-del glyphicon glyphicon-remove-sign"></button>-->
                                    <!--</dl>-->
                                <!--</li>-->

                            </ul>
                        </div>

                        <!--正在聊天列表end-->
                    </div>

                    <!--右部-->
                    <div class="col-xs-9 custom-chat-right-container">

                        <!--系统消息总框 start-->
                        <div id="system_message_div" class="system_message_div">
                            <div class="row system_message_top">
                                <span id="system_message_top_name">好友请求</span>
                            </div>
                            <!--回复好友申请模态框 start-->
                            <div class="friend_application_reply_div_modal">
                                <div id="friend_application_reply_div" class="friend_application_reply_div">
                                    <h4 id="apply_reply_title" class="apply_reply_title" style="padding-top: 15px">同意添加lastlysly为好友</h4>
                                    <h6 style="text-align: center;padding-top: 10px;padding-left: 77px">
                                        <div class="input-group" style="width: 200px">
                                            <span class="input-group-addon">备注</span>
                                            <input type="text" class="form-control" id="apply_remark_reply" aria-describedby="sizing-addon3">
                                        </div>
                                    </h6>
                                    <h5 style="text-align: center;padding-top: 10px;padding-left: 77px">
                                        <div class="input-group" style="width: 200px">
                                            <span class="input-group-addon">分组</span>
                                            <select id="apply_group_reply" style="height: 40px;width: 140px">
                                                <option value="1">家人</option>
                                                <option value="2">好友</option>
                                            </select>
                                        </div>
                                    </h5>

                                    <h5 style="text-align: center;padding-top:20px">
                                        <button type="button" applyId="" id="send_apply_btn_reply" class="btn btn-default">加为好友</button>
                                        <button type="button" id="back_btn_reply" class="btn btn-default">返回</button>
                                    </h5>
                                </div>
                            </div>

                            <div class="refuse_friend_application_reply_modal">
                                <div id="refuse_friend_application_reply_div" class="refuse_friend_application_reply_div">
                                    <h4 id="refuse_apply_reply_title" class="apply_reply_title" style="padding-top: 15px">拒绝lastlysly的好友请求</h4>
                                    <div class="form-group refuse_apply_message">
                                        <span class="input-group-addon">拒绝原因</span>
                                        <textarea class="form-control" id="resufe_message" placeholder="随便说一句" rows="2"></textarea>
                                    </div>
                                    <h5 style="text-align: center;padding-top:15px">
                                        <button type="button" applyId="" id="refuse_btn" class="btn btn-default">拒绝</button>
                                        <button type="button" id="refuse_back_btn" class="btn btn-default">返回</button>
                                    </h5>

                                </div>
                            </div>


                            <!--回复好友申请模态框 end-->

                            <div id="custom_system_message_div" class="custom_system_message_div">
                                <!--消息项-->
                                <div class="system_message_item">
                                    <div class="system_message_ite_time">2018-06-24 14:01:08</div>
                                    <span class="system_message_text">
                                        账号lastly向你发起了好友请求，消息为
                                        <span class="message_friend_apply">我是你大哥快加我，来聊天</span><br>
                                        <a applyId="" class="agree_friend_apply" href="javascript:void(0);">同意</a>
                                        <a applyId="" class="refuse_friend_apply" href="javascript:void(0);">拒绝</a>
                                        <a applyId="" class="ignore_friend_apply" href="javascript:void(0);">忽略</a>
                                    </span>
                                </div>

                            </div>
                        </div>
                        <!--系统消息总框 end-->

                        <!--弹出框-->
                        <div id="right-chat-friend-container-id" class="right-chat-container">

                            <div class="chat-custom-content">
                                <!--顶部-->
                                <div class="row chat-friend-name-top">
                                    <div class="col-xs-3">
                                        <span data-img="" id="chatting-friend-remarks">水银灯</span>
                                    </div>
                                </div>

                                <!--聊天内容框-->
                                <div class="row chat-content-div">
                                    <!--<div style="background-color: red;height: 500px;"></div>-->

                                    <div class="col-xs-12" id="custom-messages-ul">
                                        <!--对方对话框-->
                                        <dl class="row message-contain-item">
                                            <div class="message-contain-item-time">2018-06-24 14:01:08</div>
                                            <dt class="col-xs-1 message-headportrait-dt">
                                                <img class="img-responsive img-circle message-headportrait" src="img/headportrait.jpg">
                                            </dt>
                                            <dd class="col-xs-8">
                                                <div class="custom-triangle"></div>
                                                <span class="message-text-contain-friends">ssssssssssssssss
                                            ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</span>
                                            </dd>
                                        </dl>
                                        <!--自己对话框-->
                                        <dl class="row message-contain-item">
                                            <div class="message-contain-item-time">2018-06-24 14:01:08</div>
                                            <dt class="col-xs-1 message-headportrait-dt col-xs-push-11">
                                                <img class="img-responsive img-circle message-headportrait" src="img/headportrait.jpg">
                                            </dt>
                                            <dd class="col-xs-8 col-xs-push-2">
                                                <div class="custom-triangle-right"></div>
                                                <span class="message-text-contain-me pull-right">ssssssssssssssss
                                            ssssssssssssssssssssssssssssssssss
                                                ssssssssssssssssssssssssssssssssssssssssssssssssssssss</span>
                                            </dd>
                                        </dl>

                                    </div>

                                </div>
                            </div>


                            <script src="js/jquery1.11.0.min.js"></script>
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/font-awesome.min.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/froala_editor.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/froala_style.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/code_view.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/draggable.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/colors.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/emoticons.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/image_manager.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/image.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/line_breaker.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/table.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/char_counter.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/video.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/fullscreen.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/file.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/quick_insert.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/help.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/third_party/spell_checker.css">
                            <link rel="stylesheet" href="froala_editor_2.7.0/css/plugins/special_characters.css">
                            <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">-->
                            <link rel="stylesheet" href="froala_editor_2.7.0/codemirror.min.css">
                            <!--自定义修改froala样式的css-->
                            <link rel="stylesheet" href="css/custom-froala.css">

                            <!--输入框-->
                            <div class="row custom-textarea">
                                <button socketaddress="" id="send-to-btn" type="button" class="btn btn-default send-to-friend-btn">发送</button>
                                <div id="editor">
                                    <div id='edit'>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>


                <!--聊天页面主内容框 end-->


                <!--底部主内容 end-->

            </div>
        </div>
    </div>


    <!--添加好友模态框-->
    <div class="add-friends-modal-div">

        <div class="add-friends-modal">
            <!--<button type="button" class="btn btn-default remove-add-friends-modal-btn"><span class="glyphicon glyphicon-remove"></span> </button>-->
            <img src="img/icon_close_2.png" title="点我关闭" class="remove-add-friends-modal-btn">
            <h4>找好友</h4>
            <div class="input-group">
                <input type="text" class="form-control" id="loginIdOrNickname" placeholder="请输入账号/昵称">
                <span class="input-group-btn">
                <button class="btn btn-default" id="findNewFriendBtn" type="button">查找</button>
                </span>
            </div><!-- /input-group -->
            <!--找到的好友列表-->
            <div class="find-friends-result-div">
                <!--<dl class="find-friends-item">-->
                    <!--<dt class="find-friends-head"><img class="img-responsive img-circle" src="img/headportrait.jpg"></dt>-->
                    <!--<dd class="friends-nickname-and-username">那时雨(2194610467)</dd>-->
                    <!--<dd class="friends-address">男 浙江 杭州</dd>-->
                    <!--<dd class="friends-add-btn-send"><button type="button" class="btn btn-default">加好友</button></dd>-->
                <!--</dl>-->
            </div>

            <!--申请好友框-->
            <div class="apply_div">
                <div class="apply_div_rela">
                    <h5 id="apply_title">申请 【那时雨(2194610467)】为好友</h5>
                    <h6 style="text-align: center;padding-top: 10px">
                        <div class="input-group" style="width: 200px">
                            <span class="input-group-addon" id="sizing-addon2">备注</span>
                            <input type="text" class="form-control" id="apply_remark" aria-describedby="sizing-addon3">
                        </div>
                    </h6>
                    <h5 style="text-align: center;padding-top: 10px">
                        <div class="input-group" style="width: 200px">
                            <span class="input-group-addon">分组</span>
                            <select id="apply_group" style="height: 40px;width: 140px">
                                <option value="1">家人</option>
                                <option value="2">好友</option>
                            </select>
                        </div>
                    </h5>

                    <div class="form-group apply_message">
                        <span class="input-group-addon">申请消息</span>
                        <textarea class="form-control" id="apply_message" placeholder="随便说一句" rows="2"></textarea>
                    </div>


                    <h5 style="text-align: center;padding-top:20px">
                        <button type="button" fromData="" id="send_apply_btn" class="btn btn-default">发出申请</button>
                        <button type="button" id="back_btn" class="btn btn-default">返回</button>
                    </h5>
                </div>

            </div>

        </div>
    </div>

    <!--个人信息模态框-->
    <div class="userinfo-modal-div">
        <div class="userinfo-modal">
            <!--<button type="button" class="btn btn-default remove-userinfo-modal-btn"><span class="glyphicon glyphicon-remove"></span></button>-->
            <img src="img/icon_close_2.png" title="点我关闭" class="remove-userinfo-modal-btn">
            <!--<h6 class="deal_tip">双击可修改除账号以外的信息</h6>-->
            <div class="left_div_custom">
                <img class="img-responsive" title="点击修改头像"  id="userinfo_head_img" src="img/headportrait.jpg">
                <div class="nickname_motto_div">
                    <input type="text" id="userinfo_nickname" class="userinfo_nickname_div userinfo_div_input userinfo_center" readonly="readonly" value="汐"/>

                    <textarea readonly="readonly" id="userinfo_motto" placeholder="点击进入编辑" class="userinfo_div_input userinfo_center" cols="33" rows="2" warp="virtual">没有人会相信未来，谁都无法接受未来...</textarea>
                </div>

            </div>
            <div class="right_div_custom">
                <h5>账号：<span userId="" id="userinfo_loginId">lastly</span></h5>

                <h5>性别：
                    <select id="gender_select" class="gender_select">
                        <option value="true">男</option>
                        <option value="false">女</option>
                    </select>
                    &nbsp&nbsp&nbsp&nbsp年龄：<input type="text" id="userinfo_age" placeholder="点击编辑" class="userinfo_div_input userinfo_age_input" readonly="readonly" value="13"/>
                </h5>

                <h5>
                    地址：
                    <select id="province_select" class="gender_select">

                    </select>

                    <select id="city_select" class="gender_select">

                    </select>
                </h5>
                <h5>
                    出生日期：<input type="text" id="userinfo_birthday" class="userinfo_div_input" placeholder="例：2018-07-07" readonly="readonly" value="2018-11-12"/>
                </h5>
                <h5>
                    电话号码：<input type="text" id="userinfo_tel" class="userinfo_div_input" placeholder="点击进入编辑" readonly="readonly" value="12345678901"/>
                </h5>

                <h5>
                    电子邮箱：<input type="text" id="userinfo_email" class="userinfo_div_input" placeholder="点击进入编辑" readonly="readonly" value="lastly@163.com"/>
                </h5>
                <h5>
                    职业：<input type="text" id="userinfo_vocation" class="userinfo_div_input" placeholder="点击进入编辑" readonly="readonly" value="java开发工程师"/>
                </h5>

                <div class="form-group">
                    <span class="input-group-addon" id="basic-addon1">个人简介</span>
                    <textarea class="form-control userinfo_div_input" id="userinfo_synopsis" readonly="readonly" placeholder="点击进入编辑" cols="33" rows="2" warp="virtual">没有人会相信未来，谁都无法接受未来...</textarea>
                </div>

                <button type="button" dataId="" id="userinfo_revise_btn" class="btn btn-success">提交修改</button>
            </div>
        </div>
    </div>

    <!--分组管理模态框-->
    <div class="groups_modal_div">
        <div class="groups-modal">
            <!--<button type="button" class="btn btn-default remove_groups_modal_div_btn"><span class="glyphicon glyphicon-remove"></span> </button>-->
            <img src="img/icon_close_2.png" title="点我关闭" class="remove_groups_modal_div_btn">
            <h4>分组管理</h4>
            <ul class="groups_modal_groups_list">
                <h5 class="add_group_btn"><img class="my_icon add_group_icon" src="img/add_icon.png">添加分组</h5>
                <li><img groupId="" class="my_icon del_group_icon" src="img/del_2.png">
                    <div class="group_rename_div">
                        <input class="group_input_rename" groupId =""  type="text" value="汐" readonly="readonly" />
                        <img class="my_icon ok_group_icon" src="img/ok_1.png">
                    </div>
                </li>
                <li><img groupId="" class="my_icon not_group_icon" src="img/icon_not_1.png">
                    <div class="group_rename_div">
                        <input class="group_input_rename" groupId ="" placeholder="请输入分组名称"  type="text" value="汐" readonly="readonly" />
                        <img class="my_icon ok_group_icon" src="img/ok_1.png">
                    </div>
                </li>

            </ul>

            <div id="del_group_tip" class="del_group_tip">
                <div class="del_group_tip_div">
                    <h5 style="padding: 20px 10px 15px 10px">删除该分组后，组内联系人将移至默认分组</h5>
                    <h5 style="text-align: center">
                        <button type="button" groupId="" id="confirm_del_group_btn" class="btn btn-default">确认删除</button>
                        <button type="button" id="un_del_group_btn" class="btn btn-default">取消删除</button>
                    </h5>
                </div>
            </div>
        </div>

    </div>

    <!--删除好友确认模态框-->
    <div class="is_del_friend_modal_div">
        <div class="is_del_friend_modal">
            <h4>删除好友</h4>
            <h5 style="padding: 20px 10px 15px 10px">同时会从对方的好友列表里移除您，并删除你们聊天记录</h5>
            <h5 style="text-align: center">
                <button type="button" friendId="" id="confirm_del_friend_btn" class="btn btn-default">确认删除</button>
                <button type="button" id="un_del_friend_btn" class="btn btn-default">取消删除</button>
            </h5>
        </div>
    </div>


    <!--头像裁剪上传模态框-->
    <div class="head_portrait_modal_div">
        <!--图片裁剪框 start-->
        <div style="display: block" class="tailoring-container">
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">
                    <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                        <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                        选择图片
                    </label>
                    <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
                </div>
                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="tailoringImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImg"></div>
                        <div class="circular previewImg"></div>
                    </div>
                </div>
                <div class="tailoring-content-three">
                    <button class="l-btn cropper-reset-btn">复位</button>
                    <button class="l-btn cropper-rotate-btn">旋转</button>
                    <button class="l-btn cropper-scaleX-btn">换向</button>
                    <button class="l-btn sureCut" id="sureCut">确定</button>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end-->

    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/sockjs.js"></script>
    <script src="js/stomp.js"></script>
    <script src="js/home.js"></script>
    <script src="js/homesec.js"></script>
    <script src="js/mymodal.js"></script>
    <script src="js/china_area_data.js"></script>
    <script src="js/mywebsocket.js"></script>
    <script src="js/cropper.min.js"></script>
    <script src="js/homethr.js"></script>
    <!--<script src="js/jquery1.11.0.min.js"></script>-->
    <script src="froala_editor_2.7.0/codemirror.min.js"></script>
    <script src="froala_editor_2.7.0/xml.min.js"></script>
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>-->
    <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>-->
    <script src="froala_editor_2.7.0/js/froala_editor.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/align.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/char_counter.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/code_beautifier.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/code_view.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/colors.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/draggable.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/emoticons.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/entities.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/file.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/font_family.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/font_size.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/fullscreen.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/forms.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/help.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/image.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/image_manager.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/inline_style.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/line_breaker.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/link.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/lists.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/paragraph_format.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/paragraph_style.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/print.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/quick_insert.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/quote.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/save.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/special_characters.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/table.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/url.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/video.min.js"></script>
    <script src="froala_editor_2.7.0/js/plugins/word_paste.min.js"></script>
    <script src="froala_editor_2.7.0/js/third_party/spell_checker.min.js"></script>
    <script src="froala_editor_2.7.0/js/languages/zh_cn.js"></script>


    <script src="js/jquery-ui.min.js"></script>
    <script src="js/Particleground.js"></script>
    <script type="text/javascript">

        //粒子背景特效
        $('body').particleground({
            dotColor: '#E8DFE8',
            lineColor: '#133b88'
        });
    </script>

</body>
</html>